<template>
  <div class="slide-show" ref="slideHeight">
    <div class="slide-img">
        <transition name="slide-trans">
          <img id="img" v-if="isShow" :src="slides[nowIndex].src">
        </transition>
        <transition name="title-trans">
    	  <p v-if="isShow" class="bannerTitle">{{slides[nowIndex]['title']}}</p>
    	</transition>
    	<transition name="title-trans">
    	  <p v-if="isShow" class="bannerText">{{slides[nowIndex]['text']}}</p>
    	</transition>
        <transition name="slide-trans-old">
          <img v-if="!isShow" :src="slides[nowIndex].src">
        </transition>
        <transition name="title-trans-old">
    	  <p v-if="!isShow" class="bannerTitle">{{slides[nowIndex]['title']}}</p>
        </transition>
        <transition name="title-trans-old">
    	  <p v-if="!isShow" class="bannerText">{{slides[nowIndex]['text']}}</p>
        </transition>
    </div>
    <ul class="slide-pages">
      <!-- <li @click="goto(prevIndex)">&lt;</li> -->
      <li :class="{on: index === nowIndex}" v-for="(item, index) in slides" @click="goto(index)">
        <!-- <a :class="{on: index === nowIndex}">{{ index + 1 }}</a> -->
      </li>
      <!-- <li @click="goto(nextIndex)">&gt;</li> -->
    </ul>
  </div>
</template>
<script>
	export default{
		data(){
			return {
				nowIndex: 0,
      			isShow: true,
      			invTime: 5000,
				slides:[
					{
						src: require('../assets/bannerMultiScreen.jpg'),
						title:"多屏联动",
						text: "提升视觉观感，吸引更多关注"
					},
					{
						src: require('../assets/bannerGameInteraction.jpg'),
						title:"游戏互动",
						text: "黏性互动，导入更多客流"
					},
					{
						src: require('../assets/bannerCloudControl.jpg'),
						title:"云端控制",
						text: "连锁总部直控，缩减环节"
					},
					{
						src: require('../assets/bannerSmartShop.png'),
						title:"智慧店铺",
						text: "AI人脸识别，客流统计、精准投放"
					}
				]
			}
		},
		computed: {
		    prevIndex () {
		      if (this.nowIndex === 0) {
		        return this.slides.length - 1
		      } else {
		        return this.nowIndex - 1
		      } 
		    },
		    nextIndex () {
		      if (this.nowIndex === this.slides.length - 1) {
		        return 0
		      } else {
		        return this.nowIndex + 1
		      }
		    }
	  },
	  methods: {
		goto (index) {
			console.log(index,this.nowIndex)
			if(index - this.nowIndex ===0){
				return;
			}else{
				this.isShow = false
				setTimeout(() => {
					this.isShow = true
					this.nowIndex = index
					this.clear()
			        this.run()
				}, 10)
	    	}
	    },
	    run () {
	      this.invId = setInterval(() => {
	        this.goto(this.nextIndex)
	      }, this.invTime)
	    },
	    clear () {
	      clearInterval(this.invId)
	    }
	  },
	  mounted () {
	    this.run();
	  }
	}
</script>
<style>
	.slide-trans-enter-active {
	  transition: all 1s;
	}
	.slide-trans-enter {
	  transform: translateX(100%);
	}
	.slide-trans-old-leave-active {
	  transition: all 1s;
	  transform: translateX(-100%);
	}

	.title-trans-enter-active {
	  transition: all 1s;
	}
	.title-trans-enter {
	  transform: translateX(500%);
	  opacity: 1;
	}
	.title-trans-old-leave-active {
	  transition: all 1.5s;
	  transform: translateX(-500%);
	  opacity: 0;
	}

	.slide-show {
	  position: relative;
	  width: 100%;
	  overflow: hidden;
	}
	.slide-img {
	  width: 100%;
	}
	.slide-img img {
	  width: 100%;
	  height: 500px;
	  display: block;
	  position: absolute;
	  top: 0;
	  left: 0;
	}
	.slide-img img:first-child {
	  position: relative;
	}
	.slide-pages {
	  position: absolute;
	  bottom: 10px;
	  left: 41%;
	}
	.slide-pages li {
		width: 50px;
		height: 4px;
		display: inline-block;
		padding: 0 10px;
		margin: 0 10px; 
		cursor: pointer;
		background: rgba(204,204,204,0.6);
		border-radius: 3px;
	}
	.slide-pages li.on {
	  background: #fff;
	}
	.bannerTitle{
		position: absolute;
		top: 23%;
		left: 25%;
		color: #fff;
		font-size: 36px;
	}
	.bannerText{
		position: absolute;
		top: 35%;
		left: 25%;
		color: #fff;
		font-size: 26px;
	}
	@media screen and (max-width: 1600px){
		.slide-img img {
		  height: 350px;
		}
	}
</style>